import Guide from '@/components/Guide';
import { trim } from '@/utils/format';

import styles from './index.less';
import { Button } from 'antd';
import CodeMirror from "@uiw/react-codemirror";
// import "codemirror/addon/search/searchcursor";
// import "codemirror/keymap/sublime";
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
import { languages } from '@codemirror/language-data';
import { EditorView } from "@codemirror/view"
import React from 'react';


const code = `## Title

\`\`\`jsx
function Demo() {
  return <div>demo</div>
}
\`\`\`

\`\`\`bash
# Not dependent on uiw.
npm install @codemirror/lang-markdown --save
npm install @codemirror/language-data --save
\`\`\`

[weisit ulr](https://uiwjs.github.io/react-codemirror/)

\`\`\`go
package main
import "fmt"
func main() {
  fmt.Println("Hello, 世界")
}
\`\`\`
`;

interface Props {
  name: string;
}

interface State {
  count: number;
}

class HomePage extends React.PureComponent<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  incrementCount = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };

  handleChange = (value: string) => {
    console.log("handleChange", value)
    // Handle the change event
    // You can access the updated markdown content from the 'value' parameter
  };

  handleScroll = (editor: any) => {
    // Handle the scroll event
    // You can access the CodeMirror editor instance from the 'editor' parameter
  };

  handleFocus = () => {
    // Handle the focus event
  };

  handleBlur = () => {
    // Handle the blur event
  };

  handleDrop = (editor: any, event: any) => {
    // Handle the drop event
    // You can access the CodeMirror editor instance from the 'editor' parameter
    // You can access the drop event object from the 'event' parameter
  };

  handlePaste = (editor: any, event: any) => {
    // Handle the paste event
    // You can access the CodeMirror editor instance from the 'editor' parameter
    // You can access the paste event object from the 'event' parameter
  };

  getInstance = (instance: any) => {
    // Get the CodeMirror instance
    // You can access the CodeMirror instance from the 'instance' parameter
  };

  render() {
    const { name } = this.props;
    const { count } = this.state;



    return (
      <div>
        <CodeMirror
          width='800px'
          value={code}
          extensions={[markdown({ base: markdownLanguage, codeLanguages: languages }),
          EditorView.theme({
            ".cm-content": { color: "darkorange", ["flex-basis"]: "800px !important" },
            "&.cm-focused .cm-content": { color: "orange" }
          })
          ]}
          onChange={this.handleChange}
          onScroll={this.handleScroll}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
        />
      </div>
    );
  }
}
export default HomePage;


